import styles from './index.module.scss'
import Icon from '@/components/Icon'
import { Dialog, Toast } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import {
  setArticleDislikes,
  setArticleMark,
  setArticleReports,
} from '@/store/action/article'

export default function ArticleMark() {
  const [type, setType] = useState<'junk' | ''>('')
  // 菜单类型  junk 为反馈垃圾内容面板
  // 举报反馈菜单
  const reports = [
    { id: '0', title: '其他问题' },
    { id: '1', title: '标题夸张' },
    { id: '2', title: '低俗色情' },
    { id: '3', title: '错别字多' },
    { id: '4', title: '旧闻重复' },
    { id: '5', title: '广告软文' },
    { id: '6', title: '内容不适' },
    { id: '7', title: '涉嫌违法犯罪' },
    { id: '8', title: '侵权' },
  ]

  const { mark } = useSelector((state: RootState) => state.article)
  const dispatch = useDispatch()

  const handleClose = () => {
    console.log('点击了遮罩层，需要实现关闭')
    dispatch(setArticleMark({ visible: false }))
    setType('')
  }

  const handleDislike = async () => {
    console.log('点击了不喜欢', mark.article_id)
    // 发送请求让后端更新文章的标记为不喜欢
    await dispatch(setArticleDislikes(mark.article_id))
    // 提示用户
    Toast.show({ content: '操作成功', duration: 1000 })
    // 关闭 Dialog
    handleClose()
  }

  const handleReport = async (type: string) => {
    console.log(
      '点击了文章举报',
      mark.article_id,
      '举报类型',
      type,
      '其他问题remark',
      ''
    )
    dispatch(setArticleReports({ type, target: mark.article_id }))
    // 提示用户
    Toast.show({ content: '操作成功', duration: 1000 })
    // 关闭 Dialog
    handleClose()
  }

  return (
    <Dialog
      bodyClassName={styles.root}
      visible={mark.visible}
      onClose={handleClose}
      closeOnMaskClick
      content={
        <div className="more-action">
          {/* 默认菜单内容 */}
          <div hidden={type === 'junk'}>
            <div className="action-item" onClick={handleDislike}>
              <Icon type="iconicon_unenjoy1" /> 不感兴趣
            </div>
            <div className="action-item" onClick={() => setType('junk')}>
              <Icon type="iconicon_feedback1" />
              <span className="text">反馈垃圾内容</span>
              <Icon type="iconbtn_right" />
            </div>
            <div className="action-item">
              <Icon type="iconicon_blacklist" /> 拉黑作者
            </div>
          </div>

          {/* 反馈垃圾内容 */}
          <div hidden={type !== 'junk'}>
            <div className="action-item" onClick={() => setType('')}>
              <Icon type="iconfanhui" />
              <span className="back-text">返回</span>
            </div>
            {reports.map((item) => (
              <div
                key={item.id}
                className="action-item"
                onClick={() => handleReport(item.id)}
              >
                {item.title}
              </div>
            ))}
          </div>
        </div>
      }
    />
  )
}
